<template>
  <div>
    <div v-if="sendFlag=='0'">
      <div class="crud-group">
        <el-input
          v-model="paramsForm.cmName"
          placeholder="请输入集群名称"
          clearable
        />
        <el-input
          v-model="paramsForm.clusterFlag"
          placeholder="请输入子集群名称"
          clearable
        />
        <el-input
          v-model="paramsForm.serviceType"
          placeholder="请输入组件名称"
          clearable
        />
        <el-input
          v-model="paramsForm.roleType"
          placeholder="请输入角色名称"
          clearable
        />
        <el-input
          v-model="paramsForm.hostname"
          placeholder="请输入主机名称"
          clearable
        />
        <div>
          <el-button
            icon="el-icon-search"
            type="success"
            @click="getData"
          >搜索</el-button>
          <el-button
            icon="el-icon-refresh-left"
            type="warning"
            @click="reset"
          >重置</el-button>
        </div>
      </div>
      <!-- <div style="margin-bottom: 10px;">
        <el-button
          type="primary"
          @click="toSend"
        >告警发送管理</el-button>
        <el-button
          type="primary"
          @click="toUser"
        >告警用户配置</el-button>
        <el-button
          type="primary"
          @click="toLog"
        >告警发送情况日志</el-button>
      </div> -->
      <!-- <div class="pagination-container"> -->
      <!-- <crudOperation
          show=""
          :permission="permission"
        /> -->
      <!-- <el-pagination />
      </div> -->
      <el-table
        ref="table"
        v-loading="isLoading"
        :data="data"
      >
        <el-table-column
          type="index"
          label="序号"
          width="55"
        />
        <el-table-column
          label="集群"
          prop="cmName"
        />
        <el-table-column
          label="子集群"
          prop="clusterName"
        />
        <el-table-column
          label="组件"
          prop="serviceType"
        />
        <el-table-column
          label="角色"
          prop="roleType"
        />
        <el-table-column
          label="主机"
          prop="hostname"
        />
        <el-table-column
          label="告警位置"
          prop="targetName"
        />
        <el-table-column
          label="告警时间"
          prop="createTime"
        />
        <el-table-column
          label="告警原因"
          prop="alarmInfo"
          show-overflow-tooltip
        />
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page="paramsForm.current"
          :page-size="paramsForm.size"
          :page-sizes="[5, 10, 20, 30, 40]"
          layout="prev, pager, next,sizes,total"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <alarmSend
      v-if="sendFlag=='1'"
      @back="back"
    />
    <alarmUser
      v-if="sendFlag=='2'"
      @back="back"
    />
    <alarmLog
      v-if="sendFlag=='3'"
      @back="back"
    />
  </div>
</template>
<script>
import parameter from '@/api/phaseTwo/parameter.js'
import alarmSend from './alarmSend.vue'
import alarmUser from './alarmUser.vue'
import alarmLog from './alarmLog.vue'
// import crudOperation from '@/components/Crud/CRUD.operation.vue'

export default {
  components: {
    alarmSend,
    alarmUser,
    alarmLog
    // crudOperation
  },
  data() {
    return {
      total: 0,
      paramsForm: {
        current: 1,
        size: 10,
        cmName: '',
        clusterFlag: '',
        serviceType: '',
        roleType: '',
        hostname: ''
      },
      data: [],
      isLoading: false,
      permission: {
        add: ['add'],
        edit: ['edit'],
        del: ['del']
      },
      parentCluster: [],
      sendFlag: '0'
    }
  },
  watch: {

  },
  created() {
    this.getData()
  },

  methods: {
    reset() {
      this.paramsForm = {
        current: 1,
        size: 10,
        cmName: '',
        clusterFlag: '',
        serviceType: '',
        roleType: '',
        hostname: ''
      }
      this.getData()
    },
    getData(resetPage = true) {
      if (resetPage) {
        this.paramsForm.current = 1
      }
      this.isLoading = true
      parameter.getTargetAlarmInfo(this.paramsForm).then((res) => {
        this.data = res.content
        this.total = res.totalElements
      }).finally(() => {
        this.isLoading = false
      })
    },
    handleSizeChange(val) {
      this.paramsForm.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.paramsForm.current = val
      this.getData(false)
    }
    // getCluster(){
    //   parameter.cluster().then((res) => {
    //     res.forEach((item)=>{
    //       let obj={key:item.parentClusterID,value:item.parentClusterID,label:item.parentCluster}
    //       this.parentCluster.push(obj)
    //     })
    //     this.crud.queryList=[
    //       {
    //         columnName: "hostname",
    //         columnValue: "主机",
    //         inputType: 1,
    //       },
    //       {
    //         columnName: "cmName",
    //         columnValue: "集群",
    //         inputType: 2,
    //         selectionData: this.parentCluster
    //       },
    //       {
    //         columnName: "serviceType",
    //         columnValue: "组件",
    //         inputType: 1,
    //       },
    //       {
    //         columnName: "roleType",
    //         columnValue: "角色",
    //         inputType: 1,
    //       },
    //     ]
    //   })
    // },
    // toSend() {
    //   this.sendFlag = '1'
    // },
    // back(val) {
    //   this.sendFlag = val
    // },
    // toUser() {
    //   this.sendFlag = '2'
    // },
    // toLog() {
    //   this.sendFlag = '3'
    // }
  }
}
</script>
